一、前言

經過 Week 1 的工具箱基礎建設，本週進入核心功能直播即時翻譯。

• 想要達成的目標：
  • 低延遲需求：直播翻譯必須邊聽邊出字，不能等 1 小時直播結束才處理。
  • 行動端資源限制：手機邊開直播邊跑 AI 模型容易發熱爆記憶體，所以採用 Mobile-Cloud 混合架構。

各階段運作拆解

1. Audio Capture（語音擷取）

   • 作用： 透過麥克風或系統音訊擷取使用者輸入的聲音訊號。
   • 優點： 將類比聲音轉為數位音訊（如 16kHz PCM / WAV 格式）。

2. Chunking（音訊分塊）

   • 作用： 將連續不斷的語音串流切成小片段（Chunk）。
   • 優點： 若等整段講完才處理，延遲會很高，透過語音活動偵測判斷停頓，或固定每 2–5 秒切成一個檔案傳送。

3. Whisper API（語音轉文字 STT）

   • 作用： 將分塊後的語音檔傳送給 OpenAI Whisper，轉換成純文字。
   • 優點： 可加上前段文字作為參考，維持逐字稿的連貫性與專有名詞正確度。

4. LLM Prompting（大語言模型提示）

   • 作用： 將 Whisper 轉出的文字組裝進 System Prompt（提示詞），丟給 LLM 處理。
   • 優點： 例如將文字加上指令：「將這段會議發言整理成摘要並列出代辦事項」或「將此段話翻譯成英文」。

5. UI Streaming（前端流式渲染）

   • 作用： 利用 SSE (Server-Sent Events) 或 WebSocket，將 LLM 產生的回覆以逐字吐出的方式即時傳回前端。
   • 優點： 讓使用者不需等待整個回答生成完畢，能馬上在介面上看到文字動態呈現，降低體感延遲。

   

   系統運作流程圖

   

二、今日任務

AI 模組資料夾建立與 API Key 管理

1. 建立 AI 翻譯模組資料夾結構

在 lib/features/live_translate/ 下建立以下架構：

lib/features/live_translate/
├── data/
│   ├── models/           # 逐字稿與翻譯 Response Model
│   └── services/         # Whisper & LLM API 串接服務
├── presentation/
│   ├── pages/            # 即時字幕牆 UI
│   └── widgets/          # 字幕卡片、狀態指示燈
└── live_translate_page.dart

2. 設定安全的 API Key 環境變數

AI 開發最忌諱將 API Key在程式碼中提交至Git

安裝套件：

flutter pub add flutter_dotenv

建立 .env 檔案（在專案根目錄）：

OPENAI_API_KEY=your_openai_api_key_here
GEMINI_API_KEY=your_gemini_api_key_here

在 .gitignore 加入 .env：

.env

在 pubspec.yaml 載入 .env 資源:

flutter:
  assets:
    - .env

在 main.dart 初始化 dotenv：

import 'package:flutter_dotenv/flutter_dotenv.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await dotenv.load(fileName: ".env"); //載入環境變數
  // ...其餘初始化邏輯...
}

檢查清單

• [x] .env 建立完成且成功加入 .gitignore 避免 Key 外洩。
• [x] 執行 dotenv.load() 無報錯。